<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--  
    两种图形化绘制技术，Canvas，SVG
        SVG以标签作为载体，绘制图形，常用于页面的图形图标绘制
        Canvas以JS作为载体，绘制图形，常用于动态数据加载的图形化页面 
    -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect width="300" height="100"
        style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
    </svg>
</body>

</html>